<template>
	<view class="content">
		<view style="position: relative; flex: 1;">
			<!-- <image class="bg" :src="$store.state.images.search_1" :style="{'height': bgHeight + 'px'}"></image> -->
			<image class="bg" :src="$store.state.images.search_1"></image>
			<view class="buttons">
				<view class="button" @click="xmb">
					<text>立即参与星梦保</text>
				</view>
			</view>
		</view>
		<view class="search-container">
			<picker mode="region" :value="address" @change="addressChanged">
				<view class="address">
					<text>{{ address.join(' ') }}</text>
					<image class="address-ic" src="../../static/ic_arrow_right.png" mode="widthFix"></image>
				</view>
			</picker>
			
			<view class="search">
				<input placeholder="搜索" placeholder-class="my-placeholder" class="input" v-model="searchText"/>
				<image class="search-ic" src="@/static/ic_search_2.png"></image>
			</view>
		</view>
		<view class="store-list">
			<storeItem v-for="(shop, index) in filterNearbyShop" :key="shop.ShopCode" :data="shop" :index="index"></storeItem>
		</view>

	</view>
</template>

<script>
	import storeItem from './storeItem.vue'
	import amap from '../common/amap-wx.js'
	import { mapState } from 'vuex'
	export default {
		components: {
			storeItem,
		},
		mounted() {
			const _this = this;

			console.log("start amapPlugin.getRegeo", amap)
			const amapPlugin = new amap.AMapWX({key: "912b4497378429ec83e9304af049610f"})
			amapPlugin.getRegeo({
				success: (data) => {
                    console.log("amapPlugin.getRegeo", data)
                    // this.addressName = data[0].name;
					const { latitude, longitude } = data[0];
					_this.$store.commit('setLocation', data[0]);
					const [ ProviceName, CityName, CountyName ] = _this.address;
					_this.$store.dispatch("getNearbyShop", { ProviceName, CityName, CountyName});
                },
				fail: (info) => {
					console.error("amapPlugin.getRegeo", info)
					// _this.$store.commit('setLocation', { latitude:0, longitude:0 });
					// const [ ProviceName, CityName, CountyName ] = _this.address;
					// _this.$store.dispatch("getNearbyShop", { ProviceName, CityName, CountyName});
					uni.showModal({
						content: JSON.stringify(info),
					})
				}
			})
		},
		data() {
			return {
				address: ['浙江省', '台州市', '天台县'],
				searchText: '',
			}
		},
		computed: {
			...mapState(["screenWidth", "nearbyShop"]),
			bgHeight() {
				return this.screenWidth * 442 / 428;
			},
			filterNearbyShop() {
			    return this.nearbyShop.filter(item => {
			        return item.ShopName.indexOf(this.searchText) > -1;
			    })
			},
		},
		methods: {
			xmb() {
				uni.navigateTo({
					url:'/pages/home/xmb',
				})
			},
			addressChanged(address) {
				console.log('new address', address);
				const { detail } = address;
				this.address = detail.value;
				
				const [ ProviceName, CityName, CountyName ] = this.address;
				this.$store.dispatch("getNearbyShop", { ProviceName, CityName, CountyName});
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
		box-sizing: border-box;
	}
	.bg {
		width: 100vw;
		height: 100%;
	}
	.buttons {
		position: absolute;
		bottom: 80rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 100vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}
	.button {
		margin-left: 30rpx;
		height: 70rpx;
		width: 260rpx;
		background-color: #50c0f9;
		border-radius: 100rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: "yshst" !important;
	}
	.search-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 15rpx 0;
		justify-content: space-between;
		padding-right: 35rpx;
	}
	.address {
		font-size: 30rpx;
		padding: 0 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #50c0f9;
		font-family: "yshst" !important;
	}
	.address-ic {
		width: 15rpx;
		margin-left: 10rpx;
	}
	.search {
		height: 50rpx;
		background-color: white;
		border-radius: 100rpx;
		width: 300rpx;
		position: relative;
	}
	.search .input {
		width: 100%;
		height: 100%;
		padding: 0 60rpx 0 20rpx;
		box-sizing: border-box;
		font-size: 25rpx;
		/* background-color: red; */
		font-family: "yshst" !important;
	}
	.my-placeholder {
		font-family: "yshst" !important;
		color: #898989;
	}
	.search-ic {
		z-index: 2;
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 10rpx;
		padding: 11rpx;
		box-sizing: border-box;
		top: 0;
		bottom: 0;
		/* background-color: red; */
	}
	.store-list {
		min-height: 700rpx;
		height: 700rpx;
		margin-bottom: 110rpx;
	}
</style>
